import { useState } from 'react';

import { ReactComponent as Chevron } from '@/assets/images/shared/icon-chevron.svg';
import { StaffDto } from '@/shared/interfaces/generated';
import { getImageUrl } from '@/shared/lib';
import { makeMockArray } from '@/shared/lib/transformArrayIntoObject';
import { Block, Loader, SpeakerCard, SpeakerCardLoader } from '@/shared/ui';
import { List } from '@/widgets/List';
import { ModalPage } from '@/widgets/ModalPage';
import Image from 'next/image';

import cs from './TeamList.module.scss';

export const TeamList = ({ staff, isLoading }: { staff?: StaffDto[]; isLoading?: boolean }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <List
        className={cs.desktop}
        isExtensible={3}
        list={
          isLoading
            ? makeMockArray(3).map(({ id }) => <SpeakerCardLoader key={id} />)
            : staff?.map(({ id, avatar, name, positionAtWork }) => (
                <SpeakerCard
                  description={positionAtWork as unknown as string}
                  image={avatar}
                  key={id}
                  name={name as unknown as string}
                />
              ))
        }
      />
      <div className={cs.mobile_team} onClick={() => setIsOpen(true)}>
        <div className={cs.mobile_list}>
          {!isLoading && !!staff?.length
            ? staff.slice(0, 10).map(({ id, avatar, name }, index) => (
                <div
                  className={cs.mobile_member}
                  key={id}
                  style={{ left: `${index * 40}px`, zIndex: (staff?.length || 0) - index }}
                >
                  {avatar && <Image alt={name as unknown as string} fill src={getImageUrl(avatar)} />}
                </div>
              ))
            : makeMockArray(8).map(({ id }, index) => (
                <div className={cs.mobile_member} key={id} style={{ left: `${index * 40}px`, zIndex: 3 - index }}>
                  <Loader />
                </div>
              ))}
        </div>
        <div className={cs.chevron}>
          <Chevron />
        </div>
      </div>
      <ModalPage handleClose={() => setIsOpen(false)} isMobile={false} isOpen={isOpen}>
        <Block
          body={
            <List
              list={
                !isLoading && !!staff?.length
                  ? staff.map(({ id, avatar, name, positionAtWork }) => (
                      <SpeakerCard
                        description={positionAtWork as unknown as string}
                        image={avatar}
                        key={id}
                        name={name as unknown as string}
                      />
                    ))
                  : makeMockArray(8).map(({ id }) => <SpeakerCardLoader key={id} />)
              }
            />
          }
          title="Команда"
        />
      </ModalPage>
    </>
  );
};
